<template>
  <div class="tab" ref="tab">
    <ul class="tab_content" ref="tabcontent">
      <li class="tab_item" v-for="item in TabList" ref="tabitem">
        {{item.sortname}}
      </li>
    </ul>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      TabList: [
        { sortname: '全部' },
        { sortname: '家用电器' },
        { sortname: '大家电' },
        { sortname: '生活用品' },
        { sortname: '食品' },
        { sortname: '美妆' },
        { sortname: '书籍' },
        { sortname: '洗护用品' },
        { sortname: '母婴用品' },
        { sortname: '家居' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.tab, {
          startX: 0,
          click: true,
          scrollX: true,
          scrollY: false,
          eventPassthrough: 'vertical'
        })
      } else {
        this.scroll.refresh()
      }
    })
  }
}
</script>  
<style lang="scss">
.tab {
  width: 10.0rem;
  height: 1.333333rem;
}

.tab_content {
  min-width: 600px;
  float: left;
}

.tab_item {
  display: inline-block;
  font-size: 12px;
  margin: 0 1em;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: relative;
}
</style>
